.banner {
  position: relative;
  width: 100%;
  height: 526px;
  background: url("#{$assets-site}/banner-bg.png") center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

.slogan {
  width: 144px;
  height: 264px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -132px;
  margin-left: -72px;
}

@media (max-width: $screen-xs-max) {
  .banner {
    height: 526px * .75;
  }

  .slogan {
    width: 144px * .75;
    height: 264px * .75;
    margin-top: -132px * .75;
    margin-left: -72px * .75;
  }
}

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  .banner {
    height: 526px * .875;
  }

  .slogan {
    width: 144px * .875;
    height: 264px * .875;
    margin-top: -132px * .875;
    margin-left: -72px * .875;
  }
}

@media (min-width: $screen-md-min) {
  .banner {
    height: 526px * .9375;
  }

  .slogan {
    width: 144px * .9375;
    height: 264px * .9375;
    margin-top: -132px * .9375;
    margin-left: -72px * .9375;
  }
}

@media (min-width: $screen-lg-min) {
  .banner {
    height: 526px;
  }

  .slogan {
    width: 144px;
    height: 264px;
    margin-top: -132px;
    margin-left: -72px;
  }
}

@media (min-width: $screen-hg-min) {
  .banner {
    height: 526px * 1.0625;
  }

  .slogan {
    width: 144px * 1.0625;
    height: 264px * 1.0625;
    margin-top: -132px * 1.0625;
    margin-left: -72px * 1.0625;
  }
}
